import React,{useState} from 'react'
import { Button, Input, Form,Dialog,Radio,DatetimePicker,Field } from 'react-vant'
import { withRouter,useHistory } from 'react-router-dom'
const Register = () => {
    const history = useHistory()
    const [form] = Form.useForm()
    const [value, setValue] = useState(new Date())
    const onFinish = values => {
        if(values.password!==values.confrimpass){
            Dialog.alert({
                message:'确认密码和密码不一致'
            })
        }else{
            history.push({
                pathname:'/RegisterPhone',
                state:{
                    user:{
                        name:values.username,
                        password:values.password,
                        sex:values.sex,
                        birthday:value.toLocaleDateString()
                    }
                }
            })
        }
    }

  return (
    <Form
        style={{margin:'160rem 20rem'}}
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType='submit' type='primary' block style={{background:'#e53e31',border:'none',fontWeight:'bold',margin:'20rem 0'}}>
            提交
          </Button>
        </div>
      }
    >
      <Form.Item
        tooltip={{
          message:
            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
        }}
        intro='确保这是唯一的用户名'
        rules={[{ required: true, message: '请填写用户名' }]}
        name='username'
        label='用户名'
      >
        <Input placeholder='请输入用户名' />
      </Form.Item>
      <Form.Item
        name='sex'
      >
        <Radio.Group  direction="horizontal" >
            <Radio name="男" >男</Radio>
            <Radio name="女">女</Radio>
        </Radio.Group>
      </Form.Item>
      <DatetimePicker
        popup={{
            round: true,
        }}
        type='date'
        title='选择年月日'
        minDate={new Date(1890, 0, 1)}
        maxDate={new Date(2025, 10, 1)}
        value={value}
        onConfirm={setValue}
        >
        {(val, _, actions) => {
            return (
            <Field
                readOnly
                clickable
                label='选择年月日'
                value={val.toLocaleDateString()}
                placeholder='请选择日期'
                onClick={() => actions.open()}
            />
            )
        }}
    </DatetimePicker>
      <Form.Item
        rules={[{ required: true, message: '请填写密码' }]}
        name='password'
        label='密码'
      >
        <Input placeholder='请输入密码' />
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: '请填写密码' }]}
        name='confrimpass'
        label='确认密码'
      >
        <Input placeholder='确认密码' />
      </Form.Item>
      
    </Form>
  )
}
export default withRouter(Register)